<template>
	<div>
		<div :class="searchBarFixed == true ? 'search isFixed':'search'">
			<img src="../assets/logo.png" width="90px" height="56px" class="pull-left">
			<el-input size="medium" placeholder="请输入内容" v-model="keyword" class="input-search" style="margin: 2px 10px 2px"
			 @change="query(1)">
				<el-button slot="append" @click="query(1)">搜索</el-button>
			</el-input>
		</div>

		<p>
			<a href="javascript:void(0);" @click="sort(null)"> 综合排序 </a>
			<el-divider direction="vertical"></el-divider>

			<el-dropdown placement="bottom" @command="sort">
				<span class="el-dropdown-link"> 销量 </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="total_sales_asc">升序 <i class="icon el-icon-top"></i></el-dropdown-item>
					<el-dropdown-item command="total_sales_des">降序 <i class="icon el-icon-bottom"></i></el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-divider direction="vertical"></el-divider>

			<el-dropdown placement="bottom" @command="sort">
				<span class="el-dropdown-link"> 价格 </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="price_asc">升序 <i class="icon el-icon-top"></i></el-dropdown-item>
					<el-dropdown-item command="price_des">降序 <i class="icon el-icon-bottom"></i></el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-divider direction="vertical"></el-divider>

			<el-dropdown placement="bottom" @command="sort">
				<span class="el-dropdown-link"> 百分比 </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="tk_rate_asc">升序 <i class="icon el-icon-top"></i></el-dropdown-item>
					<el-dropdown-item command="tk_rate_des">降序 <i class="icon el-icon-bottom"></i></el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-divider direction="vertical"></el-divider>

			<el-dropdown placement="bottom" @command="sort">
				<span class="el-dropdown-link"> 热度 </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="tk_total_sales_asc">升序 <i class="icon el-icon-top"></i></el-dropdown-item>
					<el-dropdown-item command="tk_total_sales_des">降序 <i class="icon el-icon-bottom"></i></el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-divider direction="vertical"></el-divider>

			天猫 <el-switch v-model="isTmall" active-color="#13ce66" @change="query(1)"> </el-switch>
			<el-divider direction="vertical"></el-divider>
			包邮 <el-switch v-model="needFreeShipment" active-color="#13ce66" @change="query(1)"> </el-switch>
			<el-divider direction="vertical"></el-divider>
			券 <el-switch v-model="hasCoupon" active-color="#13ce66" @change="query(1)"> </el-switch>
			<el-divider direction="vertical"></el-divider>
			价格
			<input v-model.number="startPrice" style="width: 50px;"></input> -
			<input v-model.number="endPrice" style="width: 50px; margin-right: 20px;"></input>
			<el-button size="mini" @click="query(1)">确定</el-button>
		</p>
		<el-divider></el-divider>
		<br />

		<goods :list="goods"></goods>
		<el-divider id="btm">
			<!-- 自动滚动时显示 -->
			<p v-if="loading">加载中...</p>
			<p v-if="noMore">没有更多了</p>
		</el-divider>
		<pagination :total="total" :pageNo='pageNo' :pageSize='pageSize' @onPageChange="query"></pagination>

	</div>
</template>

<script>
	import Goods from '@/components/Goods.vue'

	var searchDiv; //频道栏目元素
	var searchDivWidth; //频道栏目初始化宽度

	export default {
		name: 'Search',
		components: {
			Goods
		},
		data() {
			return {
				searchBarFixed: false, //固定搜索框
				keyword: '', //关键字
				sortType: null,
				isTmall: false, //天猫
				needFreeShipment: false, //包邮
				hasCoupon: false, //有券,
				startPrice: null,
				endPrice: null,
				total: 200, // 记录总条数
				pageSize: 20, // 每页显示条数
				pageNo: 1, // 当前的页数
				goods: [],
				scrollQuery: false,
				loading: false,
				noMore: false
			}
		},
		mounted() {
			//获取搜索框元素，并获取初始化宽度，添加滚动监听事件
			searchDiv = document.querySelector('.search');
			searchDivWidth = searchDiv.offsetWidth;
			window.addEventListener('scroll', this.handleScroll);
			var display = $('.pagination-container').css("display");
			console.debug(display);
			if ("none" == display) {
				this.scrollQuery = true;
			}

			this.keyword = this.$route.query.keyword;
			this.query(1);
		},
		methods: {
			query(pageNo) {
				this.pageNo = pageNo;
				this.$api.goods.query({
					pageNo: this.pageNo,
					q: this.keyword,
					sort: this.sortType,
					isTmall: this.isTmall,
					needFreeShipment: this.needFreeShipment,
					hasCoupon: this.hasCoupon,
					startPrice: this.startPrice,
					endPrice: this.endPrice
				}).then(data => {
					//非滚动场景、或重新查询时，goods重新赋值
					if (this.scrollQuery == false || pageNo == 1) {
						this.goods = data;
						window.scrollTo(0, 0);
					} else {
						if (data == '') {
							this.noMore = true;
						} else {
							data.forEach(item => {
								this.goods.push(item);
							})
						}

						setTimeout(() => {
							this.loading = false;
						}, 2000)
					}
				});
			},
			//排序
			sort(sortType) {
				this.sortType = sortType;
				this.query(1);
			},
			//滚动条事件， 固定栏目
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				var offsetTop = searchDiv.offsetTop
				if (scrollTop > 60 && scrollTop > offsetTop) {
					this.searchBarFixed = true
					searchDiv.style.width = searchDivWidth + 'px'
				} else {
					this.searchBarFixed = false
				}

				var top = document.querySelector('#btm').offsetTop;
				var bottom = top - scrollTop - $(window).height();
				console.debug(scrollTop, offsetTop, top, $(window).height(), bottom)
				if (this.scrollQuery && bottom < 200 && this.loading == false) {
					this.loading = true;
					this.query(this.pageNo + 1)
				}
			},
			destroyed() {
				window.removeEventListener('scroll', this.handleScroll)
			}
		}
	}
</script>

<style>
	.isFixed {
		position: fixed;
		top: 5px;
		z-index: 9999;
	}

	.item {
		margin-bottom: 10px;
	}

	.item span.title {
		height: 1.6rem;
		font-size: .8rem;
		line-height: 1.2rem;
		display: block;
		text-overflow: ellipsis;
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		word-wrap: normal;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.item p {
		font-size: 12px;
		color: #8f8f94;
		line-height: 1.4rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin: 0;
	}

	.el-dropdown {
		color: inherit;
	}
</style>
